<template>
    <div>
    <!-- 标题栏 -->
    <van-nav-bar
      title="不凡"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
    />
    <div class="order-box">
        <div class="address">
            <div class="item">
                <p>{{OrderList.name}}</p>
                <p>{{OrderList.address}}{{OrderList.address_detail}}</p>
            </div>
        </div>
        <div class="address-box">
            <div class="item">
                <span>商品合计</span>
                <span>￥{{allPrise}}</span>
            </div>
             <div class="item">
                <span>运费</span>
                <span>免运费</span>
            </div>
             <div class="item">
                <span>优惠券</span>
                <span>暂无</span>
            </div>
        </div>
        <div class="cartList">
                <div class="left">
                    <div class="img">
                        <img src="" alt="">
                    </div>
                    <p></p>
                    <p></p>
                </div>
                <div class="right">
                    <p>X</p>
                </div>
        </div>
        <div class="bottom">
            <p class="bottom-l">实付:￥{{allPrise}}</p>
            <p class="bottom-r">支付</p>
        </div>
    </div>
    </div>
</template>
<script>
import {detailAction,submitAction} from "@/api/cart/order.js";
export default {
    data(){
        return{
            addressId:1459,
            OrderList:[],
            allPrise:0,
            goodsList:[],
        }
    },
    methods:{
    getOrder(){
        //订单确定界面数据获取
        detailAction({
           openId:localStorage.getItem('openId'),
           addressId:this.addressId
        }).then(res=>{
            console.log(res)
            this.OrderList=res.address,
            this.allPrise=res.allPrise,
            this.goodsList=res.goodsList
        })
        
    },
    onClickLeft(){
        this.$router.go(-1);
        },
       
    },
    created(){
    this.getOrder();
    }
}
</script>
<style lang="scss" scoped>
    .order-box{
        margin-top: 50px;
        position: relative;
        .address{
        background:url('http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/address-bg-bd30f2bfeb.png')0 0 repeat-x #fff;
        margin-bottom: 10px;
            .item{
            padding: 15px 10px;
        }
        }
        .address-box{    
             background-color: #fff; 
             margin-bottom: 10px;   
            .item{
                padding:15px 10px;
                border-bottom:2px solid #f4f4f4 ;
                display: flex;
                justify-content:space-between;
            }
        }
        .cartList{
            background-color: #fff;
            .left{
                .img{
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                p{

                }
            }
            .right{
                p{

                }
            }
        }
        .bottom{
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 50px;
            background-color:#fff;
            padding:0 10px;
            .bottom-l{
                float: left;
            }
            .bottom-r{
                float:right;
                width:100px;
                height: 100%;
                margin:0;
                line-height: 50px;
                color: #fff;
                font-size: 16px;
                text-align: center;
                background-color: #b4282d;
            }
        }
        
    }
</style>